﻿<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="../helpproject.xsl" ?>
<topic template="Default" lasteditedby="Geert" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../helpproject.xsd">
  <title translate="true">DataWindow explained</title>
  <keywords>
    <keyword translate="true">DataWindow</keyword>
    <keyword translate="true">DataWindow&lt;TViewModel&gt;</keyword>
    <keyword translate="true">MVVM</keyword>
  </keywords>
  <body>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">The easiest object to use with the MVVM Framework is the </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_Windows_DataWindow" styleclass="Normal" translate="true">DataWindow</link><text styleclass="Normal" translate="true"> class. The </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_Windows_DataWindow" styleclass="Normal" translate="true">DataWindow</link><text styleclass="Normal" translate="true"> takes fully care of the construction of the view models and the validation of the view models.</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">The usage of the </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_Windows_DataWindow" styleclass="Normal" translate="true">DataWindow</link><text styleclass="Normal" translate="true"> class is very simple, once you know how to do it. First of all, you will have to specify the base class in the xaml file like shown below:</text></para>
    <para styleclass="Code Example"><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">catel:DataWindow</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> x:Class=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">Catel.Articles._03___MVVM.Examples.DataWindow.PersonWindow</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot;</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">                  xmlns=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">http://schemas.microsoft.com/winfx/2006/xaml/presentation</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot;</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">                  xmlns:x=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">http://schemas.microsoft.com/winfx/2006/xaml</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot;</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">                  xmlns:catel=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">http://catel.codeplex.com</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot;&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">    </text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">    </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;!--</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> Content left out for the sake of simplicity </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">--&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">    </text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;/</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">catel:DataWindow</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">As you can see, two things have changed in regard to a “normal” window definition:</text></para>
    <list id="2" type="ol" listtype="decimal" formatstring="%s)" format-charset="DEFAULT_CHARSET" levelreset="true" legalstyle="false" startfrom="1" styleclass="Normal" style="font-family:Arial; font-size:10pt; color:#000000;">
      <li styleclass="Normal"><text styleclass="Normal" translate="true">The type definition has changed from Window to </text><text styleclass="Normal" style="font-style:italic;" translate="true">catel:DataWindow</text><text styleclass="Normal" translate="true">;</text></li>
    </list>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">The code behind is even simpler:</text></para>
    <para styleclass="Code Example"><text styleclass="Code Example" style="font-weight:normal; font-style:italic; color:#800000;" translate="true">/// &lt;summary&gt;</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:italic; color:#800000;" translate="true">/// Interaction logic for PersonWindow.xaml</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:italic; color:#800000;" translate="true">/// &lt;/summary&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">public</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> partial </text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">class</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> PersonWindow : DataWindow</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">{</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">    </text><text styleclass="Code Example" style="font-weight:normal; font-style:italic; color:#800000;" translate="true">/// &lt;summary&gt;</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">    </text><text styleclass="Code Example" style="font-weight:normal; font-style:italic; color:#800000;" translate="true">/// Initializes a new instance of the &lt;see cref=&quot;PersonWindow&quot;/&gt; class.</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">    </text><text styleclass="Code Example" style="font-weight:normal; font-style:italic; color:#800000;" translate="true">/// &lt;/summary&gt;</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">    </text><text styleclass="Code Example" style="font-weight:normal; font-style:italic; color:#800000;" translate="true">/// &lt;param name=&quot;viewModel&quot;&gt;The view model.&lt;/param&gt;</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">    </text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">public</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> PersonWindow(PersonViewModel viewModel)</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">        : </text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">base</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">(viewModel)</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">    {</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">        InitializeComponent();</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">    }</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">}</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">The code above is everything you will need when using the MVVM Framework of Catel. </text></para>
    <para styleclass="Notes"><text styleclass="Notes" translate="true">The easiest way to create a new </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_Windows_DataWindow" styleclass="Normal" style="font-style:italic;" translate="true">DataWindow</link><text styleclass="Notes" translate="true"> is to use </text><link displaytype="text" defaultstyle="true" type="topiclink" href="GS_CST_Using_the_item_templates" styleclass="Notes" translate="true">item templates</link></para>
    <para styleclass="Heading1"><text styleclass="Heading1" translate="true">Construction of view models</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">There are multiple ways to construct a window with a view model. There are three options that you have to construct a view model:</text></para>
    <list id="3" type="ul" listtype="bullet" formatstring="·" format-charset="SYMBOL_CHARSET" levelreset="true" legalstyle="false" startfrom="1" styleclass="Normal" style="font-family:Symbol; font-size:10pt; color:#000000;">
      <li styleclass="Normal"><text styleclass="Normal" style="font-weight:bold;" translate="true">Constructor with view model</text><br/><text styleclass="Normal" translate="true">This is the best option you can use. This way, it is possible to inject view models into the data window.</text></li>
      <li styleclass="Normal"><text styleclass="Normal" style="font-weight:bold;" translate="true">Constructor with model</text><br/><text styleclass="Normal" translate="true">It is possible to save a developer from creating a view model manually by accepting a model as input. Then, the data window will have to construct the view model manually and pass it through to its base constructor.</text></li>
      <li styleclass="Normal"><text styleclass="Normal" style="font-weight:bold;" translate="true">Empty constructor</text><br/><text styleclass="Normal" translate="true">If you use an empty constructor, the developer will have to set the data context manually. This something you really should avoid. But hey, it’s all up to you.</text></li>
    </list>
    <para styleclass="Heading1"><text styleclass="Heading1" translate="true">Automatic validation</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">The cool thing about the </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_Windows_DataWindow" styleclass="Normal" translate="true">DataWindow</link><text styleclass="Normal" translate="true"> is that is automatically wraps the content that a developer defines into an </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_Windows_Controls_InfoBarMessageControl" styleclass="Normal" translate="true">InfoBarMessageControl</link><text styleclass="Normal" translate="true">. This way, errors and warnings are shown at the top of the window. Another feature of the </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_Windows_DataWindow" styleclass="Normal" translate="true">DataWindow</link><text styleclass="Normal" translate="true"> is that is automatically creates a </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_Windows_Controls_WarningAndErrorValidator" styleclass="Normal" translate="true">WarningAndErrorValidator</link><text styleclass="Normal" translate="true"> control and sets the view model as source. This way, all the warnings of the view model are also shown in the </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_Windows_Controls_InfoBarMessageControl" styleclass="Normal" translate="true">InfoBarMessageControl</link><text styleclass="Normal" translate="true">. In other words: you don’t have to do anything to implementation validation, except for actually setting the warnings and errors in your view model. And if the validation takes place in the model, you can use the </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_MVVM_ViewModelToModelAttribute" styleclass="Normal" translate="true">ViewModelToModelAttribute</link><text styleclass="Normal" translate="true"> so you don’t have to worry about that either.</text></para>
  </body>
</topic>
